<template>
	<div class="l_right contjoin">
		<div class="contjoin_view">
			<div class="contjoin_add"  @click="manageContentAdd">新建</div>
			<div class="contjoin_header">
				<div class="contjoin_header_one contjoincolor"  @click="switchAccountMenu('one')">著作权证书管理</div>
				<div class="contjoin_header_three">
					<span class="contjoin_header_one_line"></span>
				</div>
				<div class="contjoin_one">
					<div class="contjoin_one_header">
						<form action="" method="get">
							
							<div class="contjoin_one_header_one">
								<div class="contjoin_one_header_li">
									<span>作品ID：</span>
									<input type="" v-model="workId" name="siteNickName" class="Username-btn" value="">

								</div>
								<div class="contjoin_one_header_li">
									<span>作品名称：</span>
									<input type="" v-model="workCategoryName" name="siteNickName" class="Username-btn" value="">

								</div>
								<div class="contjoin_one_header_li">
									<span>作品类别：</span>
									<Select v-model="workCategoryValue" style="width:140px;height: 30px;">
										<Option v-for="item in workCategory" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</div>
								<div class="contjoin_one_header_li">
									<span>作品登记号：</span>
									<input type="" v-model="workregistration" name="siteNickName" class="Username-btn" value="">

								</div>
								<!-- <div class="contjoin_one_header_li">
									<span>发布平台：</span>
									<Select v-model="platformValue" style="width:140px;height: 30px;">
										<Option v-for="item in platformData" :value="item.value" :key="item.value">{{ item.label }}</Option>
									</Select>
								</div> -->
							</div>
							<div class="contjoin_one_header_two">
								<div class=" contjoin_one_header_li contjoin_lilast" style="width:auto;">
									<span>登记完成时间：</span>
									<DatePicker @on-change="handleChange"  :value="dateValue" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择日期区间" style="width: 220px"></DatePicker>
								</div>
								<div class="contjoin_soso" @click="searchListData">搜索</div>
								<div class="contjoin_removetext" @click="clearAllData">清空</div>

							</div>
						</form>
					</div>
					<div class="contjoin_one_cont">
						<div class="contjoin_one_th">
							<ul>
								<li class="thli_1">作品ID</li>
								<li class="thli_2">作品名称</li>
								<li class="thli_3">作品类别</li>
								<li class="thli_4">作品登记号</li>
								<li class="thli_7">登记完成时间</li>
								<li class="thli_8">操作</li>
							</ul>
						</div>
						<div class="contjoin_one_tdli" v-for="(item,index) in copyRightData.data.data">
							<div v-if="index%2 === 0"  class="contjoin_one_td bgc">
								<ul>
									<li class=" tdli_1">{{item.worksId}}</li>
									<li class="tdli_2">{{item.worksTitle}}</li>
									<li class="tdli_3">{{convertWorksType1(item.worksType)}}</li>

									<li class="tdli_4">{{item.registrationNumber}}</li>
									<li class="tdli_7">{{item.registrationTime}}</li>
									<li class='tdli_8'>
										<span style='color:#6699FF;cursor: pointer;'>
											<a style='color: #6699FF' target ='_black' @click="looksCertficateDetail('dataList[i].id')">查看</a>
										</span>
										<span style='margin: 0 5px;'>|</span>
										<span  style='color:#6699FF;cursor: pointer;'>
											<a  style='color: #6699FF' target ='_black' @click='editCertificateDetails("+ dataList[i].id +")'>修改</a>
										</span>
										<span style='margin: 0 5px;'>|</span>
										<span style='color:#E94747; cursor: pointer;' @click='deletelistData(" + dataList[i].id + ")'>删除</span>
									</li>
								</ul>
							</div>
							<div v-else  class="contjoin_one_td">
								<ul>
									<li class=" tdli_1">{{item.worksId}}</li>
									<li class="tdli_2">{{item.worksTitle}}</li>
									<li class="tdli_3">{{convertWorksType1(item.worksType)}}</li>

									<li class="tdli_4">{{item.registrationNumber}}</li>
									<li class="tdli_7">{{item.registrationTime}}</li>
									<li class='tdli_8'>
										<span style='color:#6699FF;cursor: pointer;'>
											<a style='color: #6699FF' target ='_black' @click="looksCertficateDetail('dataList[i].id')">查看</a>
										</span>
										<span style='margin: 0 5px;'>|</span>
										<span  style='color:#6699FF;cursor: pointer;'>
											<a  style='color: #6699FF' target ='_black'@click='editCertificateDetails("+ dataList[i].id +")'>修改</a>
										</span>
										<span style='margin: 0 5px;'>|</span>
										<span style='color:#E94747; cursor: pointer;' @click='deletelistData(" + dataList[i].id + ")'>删除</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--分页-->
					<pagination style="margin-top: 27px;" :total="total" :current-page='current' :fromType="fromType" @pagecopyrightManage="pagechange"></pagination>
				</div>
			</div>
		</div>
		<Modal
			v-model="editStatus"
			title="接入详情"
			width='600px'
			ok-text="确定"
			id="contect_detail"
			@on-ok="confirmSubmit"
			@on-cancel="cancelSubmit"
			:loading="loading"
			cancel-text="取消">
			<div  class="popup-text">
				<div class="jie">
					<div class="jie_title">接入信息（接入信息不可修改，如有变更请删除重建）</div>
					<div class="jie_line"></div>
					<div class="jie_xinxi">
						<div>
							<span>平台类型：</span>
							<span class="platformType">视频发布平台</span>
						</div>
						<div>
							<span>平台名称：</span>
							<span class="platformCode">腾讯课堂</span>
						</div>
						<div>
							<span>账号标识：</span>
							<span class="siteHomepage">主页地址：httpllll</span>
						</div>
					</div>
					<div class="she_title">账号设置</div>
					<div class="jie_line"></div>
					<div class="she_cont">
						<div class="she_name">
							<span>账号名称：</span>
							<input type="text" name="siteNickName" class="siteNickName" value="" />
						</div>
						<div class="she_auto" >
							<span>确权设置：</span>
							<input type="radio" name="isAuto" class="isone auto" value="1" /><span>账号内容自动确权</span>
							<input type="radio" name="isAuto" class="istwo auto" value="0" /><span>账号内容不需确权</span>
						</div>

					</div>
					<!-- <div class="btn">
						<span class="btn_no">取消</span>
						<span class="btn_yes">确定</span>
					</div> -->
				</div>
			</div>
		</Modal>
		<Modal
			v-model="deleteStatus"
			title="提示"
			width='498px'
			ok-text="确定"
			id="contect_detail"
			@on-ok="deleteConfirmSubmit"
			@on-cancel="deleteCancelSubmit"
			:loading="deleteLoading"
			cancel-text="取消">
			<div  class="popup-text">
				<div class="jie">
					<div class="jie_title">是否确定删除选中内容？</div>
				</div>
			</div>
		</Modal>

	</div>
</template>

<script>
	import pagination from '../../common/pagination/pagination';
	import utils from '../../../assets/js/utils.js'
	export default {
		name: "copyRight",
		components: {
			pagination,
			
		},
		data() {
			return {
				// 分页页面区分来源
				fromType:'pagecopyrightManage',
				loading:true,
				// 编辑
				editStatus:false,
				// 删除
				deleteStatus:false,
				deleteLoading:true,
				workId:'',  //作品id
				workCategoryName:'',  //作品名称
				workregistration:'',   //作品登记号
				dateValue:'',  //日期
				workCategoryValue:'0',
				workCategory:[  //发布平台
					{
                        value: '0',
                        label: '全部'
                    },
                    {
                        value: '1',
                        label: '文字'
                    },
                    {
                        value: '2',
                        label: '口述'
                    },
                    {
                        value: '3',
                        label: '音乐'
                    },
					{
						value: '4',
						label: '戏剧'
					},
					{
						value: '5',
						label: '曲艺'
					},
					{
						value: '6',
						label: '舞蹈'
					},
					{
						value: '7',
						label: '杂技'
					},
					{
						value: '8',
						label: '美术'
					},
					{
						value: '9',
						label: '建筑'
					},
					{
						value: '10',
						label: '摄影'
					},
					{
						value: '11',
						label: '电影'
					},
					{
						value: '12',
						label: '电视剧'
					},
					{
						value: '13',
						label: '其他类似摄制电影方法创作的作品'
					},
					{
						value: '14',
						label: '工程设计图、产品设计图'
					},
					{
						value: '15',
						label: '地图、示意图'
					},
					{
						value: '16',
						label: '模型'
					},
					{
						value: '17',
						label: '其他'
					},
				],
				
				//左侧菜单默认选中状态
				// isActive: 0,
				total: 40, // 记录总条数
				display: 10, // 每页显示条数
				current: 1, // 当前的页数
				//切换状态
				switchStatus:true,
				copyRightData:{
					"code":"0000",
					"data":{
						"count":11,
						"data":[
							{
								"agentCertificateUrl":"",
								"applyTableUrl":"",
								"belongCertificateUrl":"",
								"copyrightPeopleUrl":"",
								"id":232,
								"insertTime":"2018/11/07 08:07:11",
								"otherFileUrl":"",
								"proxyLetterUrl":"",
								"registrationCertificateUrl":"1.png",
								"registrationNumber":"顶顶顶顶",
								"registrationTime":"2018/11/06",
								"sourceType":"2",
								"worksExplainUrl":"",
								"worksId":2616,
								"worksTitle":"ccm233",
								"worksType":6
							},
							{
								"agentCertificateUrl":"",
								"applyTableUrl":"",
								"belongCertificateUrl":"",
								"copyrightPeopleUrl":"",
								"id":232,
								"insertTime":"2018/11/07 08:07:11",
								"otherFileUrl":"",
								"proxyLetterUrl":"",
								"registrationCertificateUrl":"1.png",
								"registrationNumber":"顶顶顶顶",
								"registrationTime":"2018/11/06",
								"sourceType":"2",
								"worksExplainUrl":"",
								"worksId":2616,
								"worksTitle":"ccm233",
								"worksType":6
							},
							{
								"agentCertificateUrl":"",
								"applyTableUrl":"",
								"belongCertificateUrl":"",
								"copyrightPeopleUrl":"",
								"id":232,
								"insertTime":"2018/11/07 08:07:11",
								"otherFileUrl":"",
								"proxyLetterUrl":"",
								"registrationCertificateUrl":"1.png",
								"registrationNumber":"顶顶顶顶",
								"registrationTime":"2018/11/06",
								"sourceType":"2",
								"worksExplainUrl":"",
								"worksId":2616,
								"worksTitle":"ccm233",
								"worksType":6
							},
						],
						"pageNumber":1,
						"pageSize":10,
						"totalPage":0
					},
					"message":"操作成功！"
				}
			};
		},
		methods: {
			pagechange(currentPage) {
				console.log("著作权管理="+currentPage);
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
			},
			// 新建
			manageContentAdd(){
				this.$router.push({  //核心语句
					path:'/CertificateDetails',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
					  // id:this.id ,  
					}
				})
			},
			// 删除
			deletelistData(){
				this.deleteStatus = true;
			},
			// 删除数据确认按钮
			deleteConfirmSubmit(){
				setTimeout(() => {
					this.$Modal.remove();
					this.deleteStatus = false
				}, 2000);
			},
			// 删除数据取消按钮
			deleteCancelSubmit(){
				console.log('shanchuquxiao')
			},
			//切换菜单
			switchAccountMenu(value){
				console.log("切换菜单="+value);
				if(value === 'one'){
					this.switchStatus = true;
				}else{
					this.switchStatus = false;
				}
			},
			// 时间选择
			getDate(obj){
				console.log('obj='+JSON.stringify(obj))
			},
			//格式化时间戳
		  	timestampToTime(timestamp){
				timestamp = timestamp + ""
				if(timestamp.length == 10) {
					timestamp = timestamp - 0
					var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				}
				if(timestamp.length == 13) {
					timestamp = timestamp - 0
					var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				}
			
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			// 搜索
			searchListData(){
				console.log("workId="+this.workId)
				console.log("workCategoryName="+this.workCategoryName)
				console.log("workregistration="+this.workregistration)
				console.log("dateValue="+this.dateValue)
				console.log("workCategoryValue="+this.workCategoryValue)
			},
			// 清空
			clearAllData(){
				this.workId='';
				this.workCategoryName = '';
				this.workregistration = '',
				this.dateValue='';
				this.workCategoryValue='0';
			},
			// 改变时间
			handleChange(value){
				console.log("value1="+value);
				this.dateValue = value;
			},
			// 编辑数据
			editListData(data){
				console.log("data="+data);
				this.editStatus = true;
				
			},
			// 编辑接入详情确认
			confirmSubmit(){
				console.log('确定');
				setTimeout(() => {
                    this.$Modal.remove();
					this.editStatus = false
                }, 2000);
				
			},
			// 编辑接入详情取消
			cancelSubmit(){
				console.log('取消')
			},
			// 删除数据
			removeListData(itemId){
				console.log("itemId="+itemId);
				this.deleteStatus = true;
			},
			// 删除数据确认按钮
			deleteConfirmSubmit(){
				setTimeout(() => {
					this.$Modal.remove();
					this.deleteStatus = false
				}, 2000);
			},
			// 删除数据取消按钮
			deleteCancelSubmit(){
				console.log('shanchuquxiao')
			},
			// 编辑
			editCertificateDetails(worksId){
				this.$router.push({  //核心语句
					path:'/CertificateDetails',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
					// id:this.id ,  
					}
				})
			},
			// 查看详情
			looksCertficateDetail(ID){
				this.$router.push({  //核心语句
					path:'/copyrightCertDetail',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
					id:ID ,  
					}
				})
			},
			// 作品类型
			convertWorksType1(value){
				let valueD = utils.convertWorksType(value);
				return valueD;
				console.log(utils.convertWorksType)
			}
			
		},

		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		}
	};
</script>

<style scoped="scoped">
	@import '../automaticAssess/automaticAccess.css';
	.thli_1 {
	    width: 66px;
	    text-align: center;
	}
	
	.tdli_1 {
	    width: 66px;
	    text-align: center;
	}
	
	.thli_2 {
	    width: 99px;
	}
	
	.tdli_2 {
	    width: 99px;
	}
	
	.thli_3 {
	    width: 123px;
	    text-align: center;
	}
	
	.tdli_3 {
	    width: 123px;
	    text-align: center;
	}
	
	.thli_4 {
	    width: 138px;
	}
	
	.tdli_4 {
	    width: 138px;
	}
	
	.thli_5 {
	    width: 116px;
	}
	
	.tdli_5 {
	    width: 116px;
	}
	
	.tdli_red {
	    color: red!important;
	}
	
	.thli_6 {
	    width: 128px;
	}
	
	.tdli_6 {
	    width: 128px;
	}
	
	.thli_7 {
	    width: 166px;
	}
	
	.tdli_7 {
	    width: 166px;
	}
	
</style>
